{% extends 'public/header.html' %}
{% block content %}
    <title>{{ article.title }}</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#42a5f5',
                        secondary: '#fff9c4',
                        accent: '#ff9800',
                        neutral: {
                            100: '#f5f5f5',
                            200: '#eeeeee',
                            300: '#e0e0e0',
                            400: '#bdbdbd',
                            500: '#9e9e9e',
                            600: '#757575',
                            700: '#616161',
                            800: '#424242',
                            900: '#212121',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'note': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .rotate-note-1 {
                transform: rotate(2deg);
            }
            .rotate-note-2 {
                transform: rotate(-2deg);
            }
            .text-balance {
                text-wrap: balance;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-neutral-800">
    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏 - 作者介绍 -->
            <aside class="w-[300px] lg:w-100 order-2 lg:order-1">
                <div class="sticky top-24 space-y-6">
                    <!-- 作者信息 -->
                    <div class="bg-white rounded-xl p-6 shadow-sm border border-neutral-100 transition-all duration-300 hover:shadow-md">
                        <div class="flex items-center space-x-4 mb-4">
                            <img src="images/article/header/1.jpg" alt="{{ author.nickname }}" class="w-14 h-14 rounded-full border-4 border-neutral-100 object-cover">
                            <div>
                                <h4 class="font-bold text-neutral-800">{{ author.nickname }}</h4>
                                <p class="text-sm text-neutral-500">{{ author.title }}</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-center mb-4">
                            <div>
                                <p class="font-bold text-neutral-800">{{ author.original_count }}</p>
                                <p class="text-xs text-neutral-500">原创</p>
                            </div>
                            <div>
                                <p class="font-bold text-neutral-800">{{ author.like_count }}</p>
                                <p class="text-xs text-neutral-500">点赞</p>
                            </div>
                            <div>
                                <p class="font-bold text-neutral-800">{{ author.follower_count }}</p>
                                <p class="text-xs text-neutral-500">粉丝</p>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-accent hover:bg-accent/90 text-white py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                                <i class="fa fa-plus mr-1"></i> 关注
                            </button>
                            <button class="flex-1 bg-white border border-neutral-200 hover:border-neutral-300 text-neutral-700 py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                                <i class="fa fa-paper-plane mr-1"></i> 私信
                            </button>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 文章主体 -->
            <article class="w-[800px] lg:flex-1 order-1 lg:order-2">
                <div class="bg-white rounded-xl p-6 md:p-8 shadow-sm border border-neutral-100 transition-all duration-300 hover:shadow-md">
                    <div class="article-main">
                        <div class="article-header" >
                            <h1 class=" font-bold text-neutral-900 mb-4 text-balance" style="font-size: 36px">{{ article.title }}</h1>
                            <div class="flex flex-wrap items-center gap-4 text-sm text-neutral-500 mb-6" >
                                <div class="flex items-center">
                                    <img src="images/article/header/1.jpg" alt="{{ author.nickname }}" class="w-8 h-8 rounded-full mr-2">
                                    <span class="author">{{ author.nickname }}</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-calendar-o mr-1"></i>
                                    <span class="time">{{ article.create_time }}</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-eye mr-1"></i>
                                    <span class="views">浏览 {{ article.browse_num }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="article-image mb-6 rounded-xl overflow-hidden">
                            <img src="/images/article/header/1.jpg" alt="{{ article.title }}" class="w-full h-auto object-cover transition-transform duration-500 hover:scale-105">
                        </div>

                        <div class="article-content prose max-w-none text-neutral-800 leading-relaxed">
                            {{ article.article_content }}
                        </div>

                        <div class="article-footer mt-12">
                            <div class="tags flex flex-wrap gap-2">
                                {% for tag in article.article_tag.split(',') %}
                                    <span class="tag px-3 py-1 bg-neutral-100 text-neutral-700 text-sm rounded-full">{{ tag }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="comment-form mb-8">

                            <form class="flex gap-4">
                                <img src="images/article/header/1.jpg" alt="{{ session.get('nickname') }}" class="w-12 h-12 rounded-full">
                                <div class="flex-1">
                                    <textarea
                                        id="comment-content"
                                        class="w-full p-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-primary resize-none h-24"
                                        placeholder="写下你的评论..."
                                        required
                                    ></textarea>

                                    <div class="flex justify-end mt-4">
                                        <button
                                            type="button"
                                            class="bg-primary text-white py-2 px-6 rounded-lg hover:bg-primary/90 transition-all"
                                            onclick="checkLogin('detail?article_id={{article.id}}')"
                                        >
                                            发布评论m
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <p class="text-sm text-neutral-500">
                                请 <a href="javascript:void(0);" onclick="checkLogin('/ai_writing')" class="text-primary hover:underline">登录</a> 后发表评论
                            </p>

                    </div>
            </article>

        </div>
    </main>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 bg-primary/90 hover:bg-primary text-white rounded-full p-3 shadow-lg transition-all duration-300 opacity-0 invisible">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 返回顶部按钮逻辑
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>
</html>
{% endblock %}
